import { NavLink, useLocation } from "react-router-dom";

const nav = [
  { to: "/", txt: "职位" },
  { to: "/chat", txt: "聊天",  },
  { to: "/my", txt: "我的",  }
];

const st = {
  bar: {
    position: "fixed",
    bottom: 0,
    width: "100%",
    height: "56px",
    background: "rgb(255, 255, 255)",
    display: "flex",
    borderTop: "1px solid rgb(238, 238, 238)",
    zIndex: 100
  },
  link: {
    flex: 1,
    textAlign: "center",
    color: "rgb(136, 136, 136)",
    padding: "8px 0"
  },
  active: {
    color: "rgb(0, 179, 138)"
  },
  txt: {
    display: "block",
    fontSize: "12px"
  }
};

export default function Nav() {
  const loc = useLocation();
  return (
    <div style={st.bar}>
      {nav.map(tab => (
        <NavLink
          key={tab.to}
          to={tab.to}
          style={({ isActive }) => ({
            ...st.link,
            ...(isActive ? st.active : {})
          })}
        >
          {tab.ico}
          <span style={st.txt}>{tab.txt}</span>
        </NavLink>
      ))}
    </div>
  );
} 